<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, watch } from 'vue'
import chinajson from '../../../../utils/china.json'//下载链接：https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=41.148046756962515&lng=122.31867100000001&zoom=7.5
import { useRoute } from 'vue-router'

const route = useRoute()

// 监听路由变化
watch(
    () => route.path,
    (newPath, oldPath) => {
        console.log('路由从', oldPath, '变更为', newPath)
    }
)

onMounted(() => {
    var chartDom = document.getElementById('main3');
    // 注册地图数据
    echarts.registerMap('China', chinajson);
    var myChart = echarts.init(chartDom);

    const option = {
        title: {
            text: '中国各省人口密度 (示例数据)',
            subtext: '数据来源：模拟数据',
            left: 'center',
            textStyle: {
                color: "#10E4F4"
            },
            subtextStyle: {
                color: "#10E4F4"
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>密度: {c} 人/平方公里'
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        visualMap: {
            min: 1000,
            max: 4000,
            bottom: '10%',
            left: '3%',
            text: ['高', '低'],
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            },
            textStyle: {
                color: "#10E4F4"
            },
            calculable: true
        },
        series: [
            {
                name: '人口密度',
                type: 'map',
                map: 'China', // 对应注册的地图名称
                zoom: 1.2,//地图比例，占比
                roam: true, // 允许缩放拖动
                label: {
                    show: true,
                    fontSize: 8,

                },
                // 添加边框和发光效果
                itemStyle: {
                    // areaColor: "blue",//默认板块颜色
                    borderColor: '#10E4F4', // 设置边界线颜色为蓝色
                    borderWidth: 1,      // 边界线宽度
                    shadowColor: 'rgba(0, 0, 255, 0.5)', // 发光颜色
                    shadowBlur: 10,     // 发光范围
                    shadowOffsetX: 0,
                    shadowOffsetY: 0
                },
                emphasis: {
                    itemStyle: {
                        borderColor: '#10E4F4', // 高亮时边界颜色
                        borderWidth: 2,
                        shadowColor: 'rgba(0, 0, 255, 0.8)', // 高亮时发光更强
                        shadowBlur: 15
                    },
                    label: {
                        show: true
                    }
                },
                data: [
                    { name: "北京市", value: 2154 },
                    { name: "天津市", value: 1560 },
                    { name: "河北省", value: 7556 },
                    { name: "山西省", value: 3717 },
                    { name: "内蒙古自治区", value: 2520 },
                    { name: "辽宁省", value: 4359 },
                    { name: "吉林省", value: 2741 },
                    { name: "黑龙江省", value: 3830 },
                    { name: "上海市", value: 2428 },
                    { name: "江苏省", value: 8050 },
                    { name: "浙江省", value: 5737 },
                    { name: "安徽省", value: 6338 },
                    { name: "福建省", value: 1941 },
                    { name: "江西省", value: 4648 },
                    { name: "山东省", value: 10152 },
                    { name: "河南省", value: 9605 },
                    { name: "湖北省", value: 5917 },
                    { name: "湖南省", value: 6899 },
                    { name: "广东省", value: 12601 },
                    { name: "广西壮族自治区", value: 4907 },
                    { name: "海南省", value: 930 },
                    { name: "重庆市", value: 3102 },
                    { name: "四川省", value: 8341 },
                    { name: "贵州省", value: 3600 },
                    { name: "云南省", value: 4830 },
                    { name: "西藏自治区", value: 340 },
                    { name: "陕西省", value: 3834 },
                    { name: "甘肃省", value: 2637 },
                    { name: "青海省", value: 603 },
                    { name: "宁夏回族自治区", value: 684 },
                    { name: "新疆维吾尔自治区", value: 2487 },
                    { name: "台湾省", value: 1487 }
                ]
            }
        ]
    };

    // 响应式调整大小
    const handleResize = () => {
        myChart?.resize();
    };

    option && myChart.setOption(option);
    window.addEventListener('resize', handleResize);
})




onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
    myChart?.dispose();
});


</script>

<template>
    <div id='main3' class='wh100' style="padding-top: 10px;"></div>
</template>

<style scoped></style>
